<script type="text/x-template" id="cc-json-convert-keyval-el">
    <div>
        <el-form ref="convertForm" :rules="rules" :model="jsonConvertKeyValTableFormData" label-width="170px">
            <el-form-item label="转化前数据" prop="jsonData">
                <cc-json-edit-el v-model="jsonConvertKeyValTableFormData.jsonData"
                >
                </cc-json-edit-el>
            </el-form-item>
            <el-form-item label="转化后数据" prop="keyvalData">
                <el-input
                        type="textarea"
                        v-model="jsonConvertKeyValTableFormData.keyvalData"
                        :rows="6"
                        disabled
                >
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="handleCopyData(jsonConvertKeyValTableFormData.keyvalData)" style="width: 200px">复制转化后的数据</el-button>
                <el-button @click="resetForm()">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</script>

<script>
    Vue.component('cc-json-convert-keyval-el', {
        template: '#cc-json-convert-keyval-el',
        data() {
            return {
                jsonConvertKeyValTableFormData: {
                    keyvalData: '',
                    jsonData: '',
                },
                rules: {
                    jsonData: [
                        {required: true, message: '请输入要转化json数据'}
                    ]
                }
            }
        },
        computed: {},
        methods: {
            handleSubmit: function () {
                this.$refs.convertForm.validate(function (valid) {
                    if (valid) {
                        this.handleConvert()
                    } else {
                        this.$message('请将表单填写完整');
                    }
                }.bind(this));
            },
            resetForm: function () {
                //重置按钮
                this.$refs.convertForm.resetFields();
            },
            handleConvert: function () {
                var keyvalData = this.convertObj2KeyVal(this.jsonConvertKeyValTableFormData.jsonData);
                this.jsonConvertKeyValTableFormData.keyvalData = keyvalData;

            },
        },
        watch: {
            'jsonConvertKeyValTableFormData.jsonData': {
                deep: true,
                handler: function (newVal, oldVal) {
                    if (newVal) {
                        this.handleSubmit();
                    }
                }
            }
        },
        mounted() {

        },
        created() {
        }
    })
</script>
